import React from 'react';
import { Card, Row, Col, Button, Table, Progress, Descriptions } from 'antd';
import styles from './index.less';
import './style.less';
import userIcon from '@/assets/image/u4080.png';

  import { history } from 'umi';

import Message from '../message/index'

import himg from '@/assets/image/红包.png';
import jimg from '@/assets/image/积分.png';
import ximg from '@/assets/image/消费记录.png';
import yimg from '@/assets/image/余额1.png';

import qqimg from '@/assets/image/qqaol.png';



const columns = [
  {
    title: (<div style={{textAlign: 'left'}}>个人信息</div>),
    dataIndex: 'name',
    key: 'name',
    colSpan: 2,
    width: 150
  },
  {
    title: '年龄',
    dataIndex: 'content',
    key: 'content',
    colSpan: 0
  }
];

const dataSource = [
  {
    key: 1,
    name: '我的账户',
    content: (
      <>
        <span>18810068790</span>
        <Button size="small" style={{marginLeft: 10}} type="primary">已验证</Button>
      </>
    )
  },
  {
    key: 2,
    name: '账户等级',
    content: '普通会员'
  },
  {
    key: 3,
    name: '登录次数',
    content: '3'
  },{
    key: 4,
    name: '默认地址',
    content: '北京市朝阳区建国路123号'
  },
  {
    key: 5,
    name: '登录时间',
    content: '2021-01-18 09：09：09'
  },
  {
    key: 6,
    name: '支付密码',
    content: <Button size="small" type="primary" onClick={() => {
      history.push(`/information/securitySettings`);
    }}>去设置</Button>
  },
  {
    key: 7,
    name: '账户安全',
    content: <Progress percent={50} showInfo={false} />
  }
];

export default class Workbench extends React.Component {
  render(){
    return (
      <>
        <Card title="Hi，冲天飞，欢迎你" bordered={false} >
          <Row className="bg-a">
            <Col span={6}>
              <div className="ant-list-item ">
                <div className="ant-list-item-meta" style={{textAlign: 'center'}}>
                <div style={{display: 'inline-block'}}>
                  <div className="ant-list-item-meta-avatar">
                    <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{borderRadius: '0'}}>
                      <img src={yimg}/>
                    </span>
                  </div>
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>账户余额(元)</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>¥ 0.00</span>
                    </div>
                  </div>
                  <div style={{float: 'left',marginLeft: '10px',paddingTop: 10}}>
                    <Button type="primary" onClick={() => {
                      this.props.history.push(`/moneyManagement/recharge`)
                    }}>充值</Button>
                  </div>
                </div>
                
              </div>
              </div>
            </Col>
            <Col span={6}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta" style={{textAlign: 'center'}}>
                  <div style={{display: 'inline-block'}}>
                  <div className="ant-list-item-meta-avatar">
                    <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{borderRadius: '0',height: 32}}>
                      <img src={himg} style={{width: 'auto'}}/>
                    </span>
                  </div>
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>可用红包</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>¥ 188.00</span>
                      {/*<a style={{marginLeft: 10}}>红包明细</a>*/}
                    </div>
                  </div>
                  </div>
                </div>
              </div>
            </Col>   
            <Col span={6}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta" style={{textAlign: 'center'}}>
                <div style={{display: 'inline-block'}}>
                  <div className="ant-list-item-meta-avatar">
                    <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{borderRadius: '0'}}>
                      <img src={jimg}/>
                    </span>
                  </div>
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>用户积分</span>
                      
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>888</span>
                      {/*<a style={{marginLeft: 10}}>积分明细</a>*/}
                    </div>
                  </div>
                </div>
                 </div>
              </div>
            </Col>
            <Col span={6}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta" style={{textAlign: 'center'}}>
                <div style={{display: 'inline-block'}}>
                  <div className="ant-list-item-meta-avatar">
                    <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{borderRadius: '0',width: 35}}>
                      <img src={ximg}/>
                    </span>
                  </div>
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>消费总额</span>
                      
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>¥ 188.00</span>
                      {/*<a style={{marginLeft: 10}}>资金明细</a>*/}
                    </div>
                  </div>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </Card>
        <Card title="进行中的订单" bordered={false} style={{marginTop: 24}}>
          <div style={{display: 'flex'}}>
            <div style={{width: '14.28%'}}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta">
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>新闻媒体</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>0</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{width: '14.28%'}}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta">
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>自媒体</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>0</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{width: '14.28%'}}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta">
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>微信公众号</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>0</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{width: '14.28%'}}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta">
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>新浪微博</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>0</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{width: '14.28%'}}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta">
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>短视频</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>0</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{width: '14.28%'}}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta">
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>小红书</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>0</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{width: '14.28%'}}>
              <div className="ant-list-item">
                <div className="ant-list-item-meta">
                  <div className="ant-list-item-meta-content">
                    <div className="ant-list-item-meta-title">
                      <span style={{color: '#333'}}>软文撰写</span>
                    </div>
                    <div className="ant-list-item-meta-description">
                      <span style={{color: 'rgba(0, 0, 0, 0.85)',fontSize: 20}}>0</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Card>
        <Row style={{marginTop: 24}} gutter={10}>
          <Col xxl={6} xl={12} lg={12} md={12} sm={12} xs={12} style={{marginBottom: 24}}>
            <div style={{background: '#fff'}}>
              <Table bordered pagination={false} dataSource={dataSource} columns={columns} />
            </div>
          </Col>
          <Col xxl={13} xl={24} lg={24} md={24} sm={24} xs={24} style={{marginBottom: 24}}>
            <div  style={{height: 444}}>
              <Message/>
            </div>
          </Col>
          <Col xxl={5} xl={12} lg={12} md={12} sm={12} xs={12} style={{marginBottom: 24}}>
            <Card title="专属客服" bordered={false}>
              <div style={{height: 339}}>
                <div className={styles.arait}>
                  <img src={userIcon} className={styles.image}/>
                </div>  
                <div className={styles.content}>
                  <Descriptions column={1}>
                    <Descriptions.Item label="联系人">李小冉</Descriptions.Item>
                    <Descriptions.Item label="QQ">
                      <a>
                        <img src={qqimg}/>
                      </a>
                      
                      
                    </Descriptions.Item>
                    <Descriptions.Item label="手机号">18810068790</Descriptions.Item>
                  </Descriptions>
                </div>
              </div>
            </Card>
          </Col>
          
          
        </Row>
        {/* <Card title="快捷通道" bordered={false} >
          <Row>
            <Col span={4}>
              <div className={styles.item_li}>
                <div className={styles.icon}>
                  <div className={styles.icon_text}>
                    <DiffOutlined />
                  </div>
                </div>
                <div className={styles.nav_text}>新闻软文发布</div>
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.item_li}>
                <div className={styles.icon}>
                  <div className={styles.icon_text}>
                    <PieChartOutlined />
                  </div>  
                </div>
                <div className={styles.nav_text}>小红书发布</div>
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.item_li}>
                <div className={styles.icon}>
                  <div className={styles.icon_text}>
                    <WechatOutlined />
                  </div>
                </div>
                <div className={styles.nav_text}>微信大号发布</div>
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.item_li}>
                <div className={styles.icon}>
                  <div className={styles.icon_text}>
                    <WeiboCircleOutlined />
                  </div>
                </div>
                <div className={styles.nav_text}>微博大号发布</div>
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.item_li}>
                <div className={styles.icon}>
                  <div className={styles.icon_text}>
                    <FormOutlined />
                  </div>
                </div>
                <div className={styles.nav_text}>软文代写下单</div>
              </div>
            </Col>
            <Col span={4}>
              <div className={styles.item_li}>
                <div className={styles.icon}>
                  <div className={styles.icon_text}>
                    <CopyOutlined />
                  </div>
                </div>
                <div className={styles.nav_text}>发票申请</div>
              </div>
            </Col>
          </Row>
        </Card> */}
      </>
    )
  }
}
